<template>
  <view class="hexagram-input">
    <view 
      v-for="(item, index) in yaoList" 
      :key="index"
      class="yao-item"
    >
      <text class="label">{{ item.title }}</text>
      <view 
        class="selector"
        @tap="showSelector(index)"
      >
        <text class="value">{{ item.selected || '请选择' }}</text>
        <image 
          class="arrow"
          :src="arrowIcon"
          mode="aspectFit"
        />
      </view>
    </view>
    
    <!-- 选择器弹窗 -->
    <uni-popup ref="popup" type="bottom">
      <view class="selector-content">
        <view class="header">
          <text>选择爻值</text>
          <text @tap="closeSelector">取消</text>
        </view>
        <view class="options">
          <view 
            v-for="(option, idx) in options"
            :key="idx"
            class="option"
            :class="{ active: currentValue === option.value }"
            @tap="selectValue(option)"
          >
            <text>{{ option.text }}</text>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { ref, reactive } from 'vue'

export default {
  props: {
    modelValue: {
      type: Array,
      default: () => []
    }
  },
  
  emits: ['update:modelValue', 'change'],
  
  setup(props, { emit }) {
    const popup = ref(null)
    const currentIndex = ref(-1)
    const currentValue = ref('')
    
    const options = [
      { text: '▅▅ ▅▅   (2背1字)', value: '0' },
      { text: '▅▅▅▅▅   (1背2字)', value: '1' },
      { text: '▅▅ ▅▅ 1X (0背3字)', value: '2' },
      { text: '▅▅▅▅▅ O (3背0字)', value: '3' }
    ]
    
    const yaoList = reactive([
      { title: '六爻', selected: '' },
      { title: '五爻', selected: '' },
      { title: '四爻', selected: '' },
      { title: '三爻', selected: '' },
      { title: '二爻', selected: '' },
      { title: '初爻', selected: '' }
    ])
    
    const showSelector = (index) => {
      currentIndex.value = index
      currentValue.value = props.modelValue[index]
      popup.value.open()
    }
    
    const closeSelector = () => {
      popup.value.close()
    }
    
    const selectValue = (option) => {
      const newValues = [...props.modelValue]
      newValues[currentIndex.value] = option.value
      yaoList[currentIndex.value].selected = option.text
      
      emit('update:modelValue', newValues)
      emit('change', newValues)
      closeSelector()
    }
    
    return {
      popup,
      yaoList,
      options,
      currentValue,
      showSelector,
      closeSelector,
      selectValue,
      arrowIcon: '/static/images/arrow_down.png'
    }
  }
}
</script>

<style lang="scss" scoped>
.hexagram-input {
  .yao-item {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    .label {
      width: 120rpx;
      font-size: 28rpx;
      color: #333;
    }
    
    .selector {
      flex: 1;
      height: 80rpx;
      border: 1px solid #ddd;
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      
      .value {
        flex: 1;
        font-size: 28rpx;
        color: #333;
      }
      
      .arrow {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
}

.selector-content {
  background-color: #fff;
  border-radius: 16rpx 16rpx 0 0;
  
  .header {
    display: flex;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1px solid #eee;
    
    text {
      font-size: 32rpx;
      color: #333;
      
      &:last-child {
        color: #666;
      }
    }
  }
  
  .options {
    padding: 20rpx 30rpx;
    max-height: 600rpx;
    overflow-y: auto;
    
    .option {
      height: 100rpx;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #333;
      border-bottom: 1px solid #eee;
      
      &.active {
        color: #3872FE;
      }
    }
  }
}
</style>